<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">金融审计</el-breadcrumb-item>
          <el-breadcrumb-item>贷款与存款数据变动分析</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="big-box">
        <!-- 查询条件 -->
        <div>
          <div class="centent-title" @click="showCondition= !showCondition">
            <i
              :class="[showCondition?'el-icon-d-arrow-right rotate ':'el-icon-d-arrow-right rotate1 ']"
            ></i>
            <span class="show-box-title">查询条件</span>
          </div>
          <div class="centent-inner search-inner" v-show="showCondition">
            <div class="search-item">
              <span class="item-title must-item-title">所选银行：</span>
              <div class="select-box">
                <el-select v-model="bankValue" placeholder="请选择">
                  <el-option
                    v-for="item in bankOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title">频度：</span>
              <div class="select-box">
                <el-select v-model="rateValue" placeholder="请选择">
                  <el-option
                    v-for="item in rateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title">时间：</span>
              <div class="select-box">
                <el-date-picker
                  v-model="timeValue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">所选机构：</span>
              <div class="select-box">
                <el-cascader :options="orgOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">统计方式：</span>
              <div class="select-box">
                <el-select v-model="statisticsValue" placeholder="请选择">
                  <el-option
                    v-for="item in statisticsOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">单位：</span>
              <div class="select-box">
                <el-select v-model="companyValue" placeholder="请选择">
                  <el-option
                    v-for="item in companyOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">查询内容：</span>
              <div class="select-box">
                <el-select v-model="queryValue" placeholder="请选择">
                  <el-option
                    v-for="item in queryOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="btn-box">
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>提交</span>
              </button>
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>重置</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCondition: true, //是否显示查询条件
      bankOptions: [
        {
          value: "选项1",
          label: "建设银行"
        },
        {
          value: "选项2",
          label: "工商银行"
        },
        {
          value: "选项3",
          label: "农业银行"
        }
      ],
      bankValue: "", //所选银行
      rateOptions: [
        {
          value: "选项1",
          label: "按月"
        },
        {
          value: "选项2",
          label: "按周"
        },
        {
          value: "选项3",
          label: "按日"
        }
      ],
      rateValue: "", //频度
      timeValue: "", //时间
      fieldOptions: [
        {
          value: "选项1",
          label: "字段1"
        },
        {
          value: "选项2",
          label: "字段2"
        },
        {
          value: "选项3",
          label: "字段3"
        }
      ],
      fieldValue: "", //频度
      companyOptions: [
        {
          value: "选项1",
          label: "无"
        },
        {
          value: "选项2",
          label: "某某单位"
        }
      ],
      companyValue: "", //单位
      loanOptions: [
        {
          value: "选项1",
          label: "五年"
        },
        {
          value: "选项2",
          label: "四年"
        },
        {
          value: "选项3",
          label: "三年"
        },
        {
          value: "选项4",
          label: "二年"
        },
        {
          value: "选项5",
          label: "一年"
        }
      ],
      loanValue: "", //贷款期限
      waysLoanOptions: [
        {
          value: "选项1",
          label: "抵押"
        },
        {
          value: "选项2",
          label: "抵押"
        }
      ],
      waysLoanValue: "", //贷款方式
      // 机构
      orgOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      objectOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      statisticsOptions: [
        {
          value: "选项1",
          label: "无"
        },
        {
          value: "选项2",
          label: "有"
        },
        {
          value: "选项3",
          label: "不确定"
        }
      ],
      statisticsValue: "", //统计方式
      queryOptions: [
        {
          value: "选项1",
          label: "贷款余额"
        },
        {
          value: "选项2",
          label: "贷款"
        },
        {
          value: "选项3",
          label: "还款"
        }
      ],
      queryValue: "", //查询内容

      searchValue: "", //搜索框
      tableData: [
        {
          levelBank: "中国工商银行",
          loanBank: "北京分行",
          customerName: "01 现金及存放中央银行款项",
          currency: "2019-03-08",
          dateIssuance: "2019-03-08",
          dueDate: "2019-04-05",
          actualDate: "2019-01-01",
          businessVariety: "中期流动资金贷款"
        },
        {
          levelBank: "中国农业银行",
          loanBank: "北京分行",
          customerName: "02 存放同业款项",
          currency: "人民币",
          dateIssuance: "2019-03-08",
          dueDate: "2019-04-05",
          actualDate: "2019-01-01",
          businessVariety: "中期流动资金贷款"
        },
        {
          levelBank: "中国银行",
          loanBank: "天津分行",
          customerName: "01 现金及存放中央银行款项",
          currency: "2019-03-08",
          dateIssuance: "2019-03-08",
          dueDate: "2019-04-05",
          actualDate: "2019-01-01",
          businessVariety: "中期流动资金贷款"
        },
        {
          levelBank: "中国建设银行",
          loanBank: "天津分行",
          customerName: "02 存放同业款项",
          currency: "2019-03-08",
          dateIssuance: "2019-03-08",
          dueDate: "2019-04-05",
          actualDate: "2019-01-01",
          businessVariety: "中期流动资金贷款"
        }
      ],
      currPage: 1,
      pageSize: 10
    };
  },
  methods: {
    resetHandle() {
      console.log("重置");
      // this.userValue = "";
      // this.funcValue = "";
      // this.logValue = "";
      // this.timeValue = "";
    },
    exportHandle() {
      // console.log(this.multipleSelection);
      console.log("导出");
    },
    searchHandle() {
      console.log("搜索");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currPage = val;
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .big-box {
    width: 100%;
    height: calc(100vh - 175px);
    overflow-y: scroll;
    background-color: #fff;
  }
  .centent-title {
    box-sizing: border-box;
    i {
      color: #455f85;
      margin-left: 20px;
    }
    .show-box-title {
      margin-right: 10px;
      color: #455f85;
    }
    .rotate {
      transition: all 0.5s;
      transform: rotate(90deg);
    }
    .rotate1 {
      transform: rotate(0deg);
      transition: all 0.5s;
    }
  }
  .centent-inner {
    padding: 0 20px 20px 20px;
  }

  // 搜索内容
  .search-inner {
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-self: flex-start;
    .search-item {
      width: 45%;
      height: 32px;
      margin-bottom: 40px;
      font: 14px/32px "PingFangSC-Regular";
      color: #333333;
      display: flex;
      justify-content: flex-end;
      .select-box {
        width: 370px;
        height: 32px;
        /deep/.el-input {
          width: 370px;
        }
        /deep/.el-input__inner {
          width: 370px;
          height: 32px;
        }
        /deep/.el-input__icon {
          line-height: 32px;
        }
        /deep/.el-select-dropdown__item {
          font: 14px/20px "PingFangSC-Regular";
        }
      }
      .must-item-title::before {
        content: "*";
        color: red;
        margin-right: 5px;
      }
    }
    .btn-box {
      width: 100%;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 70px;
        margin: 0 10px;
      }
    }
  }
}

/deep/.el-range-editor.el-input__inner {
  padding: 0 10px;
}
</style>